<script setup lang="ts">
import 'es-drager/lib/style.css'
import Drager, { DragData, MarklineData } from 'es-drager'
import { reactive, ref } from 'vue';
import UseDiagonalHandle from './hooks/UseDiagonalHandle';
const markLineData = ref<MarklineData>({ left: null, top: null })
function onMarkline(data: MarklineData) {
  console.log(data)
  markLineData.value = data
}
const imgWH = reactive({
  width: 200
})
const imgD = reactive({
  width: 200,
  height: 200
})
//判断当前缩放点是不是四个角
const isDiagonalHandle = UseDiagonalHandle()
const onResize = (data:any) => {
  if (isDiagonalHandle.value) {
    imgWH.width = data.width
  }
  imgD.width = data.width
  imgD.height = data.height
}
</script>

<template>
  <div class="container">
    <Drager @resize="onResize" :markline="onMarkline" :width="200" :height="200" :left="20" :top="20" :rotatable="true" :boundary="true" :snap="true">
      <div class="container-img" :style="{width: imgD.width+'px', height: imgD.height+'px'}">
        <img :style="{width: imgWH.width+'px', height: imgWH.width+'px'}" class="logo" src="./assets/logo.png" alt="">
      </div>
    </Drager>
    <Drager class="el-drager-clear" style="opacity: 0;" :border="false" :disabled="true" :resizable="false" :rotatable="false" :width="1000" :height="0" :left="0" :top="-2" :snap="true">
      辅助线不显示
    </Drager>
    <Drager class="el-drager-clear" style="opacity: 0;" :border="false" :disabled="true" :resizable="false" :rotatable="false" :width="0" :height="800" :left="802" :top="0" :snap="true">
      辅助线不显示
    </Drager>
    <div
      v-show="markLineData.left"
      class="es-editor-markline-left"
      :style="{ left: 500 + 'px' }"
    ></div>
    <div
      v-show="markLineData.top"
      class="es-editor-markline-top"
      :style="{ top: 400 + 'px' }"
    ></div>
  </div>
</template>

<style scoped>
.el-drager-clear.es-drager.disabled {
  cursor: default!important;
}
.container-img {
  overflow: hidden;
}
.el-drager, .es-drager-rotate {
  z-index: 1!important;
}
.container {
  width: 1000px;
  height: 800px;
  background-color: #ffffff;
  position: relative;
  border: 1px solid red;
  
}
[class^='es-editor-markline'] {
  position: absolute;
  z-index: 9999;
  background-color: greenyellow;
}
[class^='es-editor-markline'] {
  position: absolute;
  z-index: 9999;
  background-color: greenyellow;
}
.es-editor-markline-left {
  height: 100%;
  width: 1px;
  top: 0;
}
.es-editor-markline-top {
  width: 100%;
  height: 1px;
  left: 0;
}
</style>
